<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<script src="js/jquery-3.1.1.js"></script>
	<title>评分</title>
	<style type="text/css">
		 body{
            /*文字大小12px，1.5倍的行间距，arial 一种字体*/
            font: 12px/1.5 arial;
            color: #666;
        }
        ul,p{
            margin: 0;
            padding: 0;
        }
        #star{
            width: 600px;
            margin: 10px auto;
            position: relative;
        }
        #star span,
        #star ul{
            float: left;
            margin: 0 5px;
        }
        #star li{
            list-style-type: none;
            float: left;
            width: 24px;
            height: 24px;
            cursor: pointer;
            background-image: url(images/star.png);
            background-repeat: no-repeat;
        }
        #star li.on{
            background-position: 0 -28px;
        }
        #star p{
            position: absolute;
            top: 20px;
            width: 160px;
            /*background-color: rebeccapurple;*/
        }
        #star p em{
            display: block;
            font-style: normal;
            color: #f60;
        }
        #star strong{
            color: #f60;
        }
	</style>
</head>
<body>
<div id="star">
	<span>点击星星评分</span>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<!--显示结果-->
	<span></span>
	<!--显示评分及评语-->
	<p></p>
</div>
<script type="text/javascript">
$(function () {
	var msg = [
            "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
            "不满意|部分有破损，与卖家描述的不符，不满意",
            "一般|质量一般，没有卖家描述的那么好",
            "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
            "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
        ]
	var isStar = 0
	
	// split()根据指定字符分割字符串，并返回一个数组
	// console.dir(msg[0].split('|'))
	console.log($("#star ul").position().left);
	
	// each() 遍历每一个jQuery对象，让每个匹配的元素执行一个函数
	// index:元素的索引，elem：DOM元素
	$('#star ul li').each(function (index,elem){
		// console.log(elem)
		// console.dir($(this));
		
		$(this).mouseover(function () {
			show(index+1);
			
			// 显示当前评分及评语
			var left = $('#star ul').position().left + index * $(this).width();
			var html = '<em><b>'+(index+1)+'</b>分 '+msg[index].split('|')[0]+'</em>'+msg[index].split('|')[1];
			$('#star p').css('left',left).html(html);
		});
		
		$(this).click(function () {
			// 记录当前所点击的星星编号
			isStar = index+1;
			
			// 显示评分结果
			$('#star span:last').html('<strong>'+isStar+'分</strong>（'+msg[index].split('|')[1]+'）');
			$('#star p').empty();
		});
		
		
		$(this).mouseout(function () {
			show(isStar);
			$('#star p').empty();
		});
		
	});
	
	// 用来展示星星
	function show (score) {		
		$('#star ul li').each(function (index) {
			this.className = index<score ? 'on' : '';
			
			// if (index < score) {
			// 	this.className = 'on';
			// } else{
			// 	this.className = '';
			// }
		});	
	}
});
</script>

</body>
</html>
